/* CSS Document */
.monthDayWidget {
	overflow: hidden;
}
@font-face {
	font-family: "customfont";
	src: url("../fonts/COMIC.TTF") format("opentype");
}
.monthDayWidget .dayHollday {
	color: red;
}
.dayTitle a {
	margin: 0 auto;
	display: table;
}
.monthWidgetContent ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.monthWidgetContent li {
	background-color:rgb(255,168,75);
	font-size: 0.6em;
	padding-left: 1em;
	text-indent: -.7em;
	width: 100%;
	height:1.4em;
	overflow:hidden;
	border-radius:5px;	
}
.monthWidgetContent li:before {
    content: "• ";
    color: #7F4E20; /* or whatever color you prefer */
}
.monthWidgetContent a {
	text-decoration: inherit;

}
#MonthEventList {
	background-image: url(../img/indexBG.png);
}

.flex-box {
  /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  
  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
}
.flex-box > div {
	-webkit-box-flex:1 ;
    -moz-box-flex: 1;
    box-flex: 1;
	word-break: break-all;
	width:13.5%;
	font-family: customfont, cursive;
	float:left;
}
.weekTitle {
	font-family: customfont, cursive;    
	background:rgba(200,200,200,0.5);
	border-top-left-radius:20px;
	text-align:center;
	margin: 0px 1px;
}
.flex-box .monthDayWidget {
	background:rgba(255,204,155,0.3);
	border-bottom-right-radius:20px;
	height: 80px;
	margin: 2px 1px;
}